<!DOCTYPE html>
<html>

<head>
  <title>TRTC 实时音视频</title>
  <meta http-equiv='Content-Type' content='text/html; charset=UTF-8' />
  <meta name='viewport' content='width=device-width, initial-scale=1, user-scalable=no, shrink-to-fit=no'>
  <!-- CSS only -->
  <link href='https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/css/bootstrap.min.css' rel='stylesheet'
        integrity='sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3' crossorigin='anonymous'>
  <link href='./css/base.css' rel='stylesheet' type='text/css' />
  <!-- JavaScript Bundle with Popper -->
  <script src='https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/js/bootstrap.bundle.min.js'
          integrity='sha384-ka7Sk0Gln4gmtz2MlQnikT1wXgYsOg+OMhuP+IlRH9sENBO0LRn5q+8nbTov4+1p'
          crossorigin='anonymous'></script>
</head>

<body>

<!--不知道有什么用，但是不能删-->
<div class='container-fluid text-white header'>
  <div style='flex-direction: row;display: flex;justify-content: center;align-items: center'>
    <div id='language'>中/En</div>
    <a target="_blank" class='github' id="github" href='https://github.com/LiteAVSDK/TRTC_Web'>
      <svg height='32' aria-hidden='true' viewBox='0 0 16 16' version='1.1' width='32' data-view-component='true'
           class='octicon octicon-mark-github v-align-middle'>
        <path fill-rule='evenodd'
              d='M8 0C3.58 0 0 3.58 0 8c0 3.54 2.29 6.53 5.47 7.59.4.07.55-.17.55-.38 0-.19-.01-.82-.01-1.49-2.01.37-2.53-.49-2.69-.94-.09-.23-.48-.94-.82-1.13-.28-.15-.68-.52-.01-.53.63-.01 1.08.58 1.23.82.72 1.21 1.87.87 2.33.66.07-.52.28-.87.51-1.07-1.78-.2-3.64-.89-3.64-3.95 0-.87.31-1.59.82-2.15-.08-.2-.36-1.02.08-2.12 0 0 .67-.21 2.2.82.64-.18 1.32-.27 2-.27.68 0 1.36.09 2 .27 1.53-1.04 2.2-.82 2.2-.82.44 1.1.16 1.92.08 2.12.51.56.82 1.27.82 2.15 0 3.07-1.87 3.75-3.65 3.95.29.25.54.73.54 1.48 0 1.07-.01 1.93-.01 2.2 0 .21.15.46.55.38A8.013 8.013 0 0016 8c0-4.42-3.58-8-8-8z'></path>
      </svg>
    </a>
  </div>
</div>

<!--正式部分-->
<div class='container-fluid'>
  <div class='row justify-content-center'>
    <div class='col-md-10 col-sm-12'>

     
      <h1 style='font-size: 14px'>
        <span class='zh-cn'>参数</span>
      </h1>
      <!--以下为输入参数-->
      <div class='input-list'>
        <div class='input-group input-group-sm mb-3'>
          <span class='input-group-text'>SDKAppId</span>
          <input id='sdkAppId' type='number' class='form-control' placeholder='SDKAppId'
                 value=''>
        </div>
        <div class='input-group input-group-sm mb-3'>
          <span class='input-group-text'>SecretKey</span>
          <input id='secretKey' type='text' class='form-control' placeholder='secretKey'
                 value=''>
        </div>
      </div>
      <div class='input-list'>
        <div class='input-group input-group-sm mb-3'>
          <span class='input-group-text'>UserId</span>
          <input id='userId' type='text' class='form-control' placeholder='userId'>
        </div>
        <div class='input-group input-group-sm mb-3'>
          <span class='input-group-text'>RoomId</span>
          <input id='roomId' type='number' min='1' max='4294967294' class='form-control' placeholder='roomId'>
        </div>
      </div>

      <!--输出警告-->
      <div class="alert alert-danger" role="alert">
        <span class='zh-cn'>注意️：本 Demo 仅用于调试，正式上线前请将 UserSig 计算代码和密钥迁移到您的后台服务器上，以避免加密密钥泄露导致的流量盗用。<a target="_blank" href='https://cloud.tencent.com/document/product/647/17275'>查看文档</a></span>
      </div>



      <h1 style='font-size: 14px'>
        <span class='zh-cn'>设备</span>
      </h1>

      <!--获取设备权限 -->
      <div class='select-wrapper'>
        <div class='input-group mb-3'>
          <select class='form-select' id='camera-select'>
          </select>
          <label class='input-group-text' for='camera-select'>Camera</label>
        </div>
        <div class='input-group mb-3'>
          <select class='form-select' id='microphone-select'>
          </select>
          <label class='input-group-text' for='microphone-select'>Microphone</label>
        </div>
      </div>
      <p style='font-size: 14px'>
        <span class='zh-cn'>PS: 进房之前请确认当前页面允许使用摄像头和麦克风</span>
      </p>



  <!-- 操作按钮-->
      <h1 style='font-size: 14px'>
        <span class='zh-cn'>操作</span>
      </h1>
      <div class='wrapper'>
        <button id='join' type='button' class='btn btn-primary btn-sm'>加入房间</button>
        <button id='publish' type='button' class='btn btn-primary btn-sm'>发布</button>
        <button id='unpublish' type='button' class='btn btn-primary btn-sm'>不发布</button>
        <button id='leave' type='button' class='btn btn-primary btn-sm'>离开房间</button>
      </div>
      <div class='wrapper'>
        <button id='startShare' type='button' class='btn btn-primary btn-sm'>开始共享屏幕</button>
        <button id='stopShare' type='button' class='btn btn-primary btn-sm'>停止共享屏幕</button>
      </div>

  <!-- 邀请码部分-->
      <div class='alert alert-primary' role='alert' id='invite' style='display: none;flex-direction: column;'>   <span class='zh-cn'>复制链接邀请好友加入视频通话，一条链接仅可邀请一人，复制后自动更新链接。</span>
        <div class='copy'>
          <button class='invite-btn' id='inviteBtn' data-clipboard-target='#inviteUrl'>
            点击复制
          </button>
          <input id='inviteUrl' class='invite-input' value='https://github.com/zenorocha/clipboard.js.git'>
        </div>
      </div>
      <div class='pusher'>
        <div class='log' id='log'>
          <strong>Log:</strong>
        </div>
        <div class='local' id='local'></div>
      </div>
      <div class='player' id='remote-container'></div>
    </div>

  </div>
</div>
  <!--脚本 -->
<div id='console'>Open vConsole</div>
<script src='https://cdn.bootcss.com/vConsole/3.3.4/vconsole.min.js'></script>
<script src='https://web.sdk.qcloud.com/trtc/webrtc/demo/latest/dist/trtc.js'></script>
<script src='https://cdn-go.cn/aegis/aegis-sdk/latest/aegis.min.js'></script>
<script src=' js/libs/clipboard.min.js'></script>
<script src=' js/libs/lib-generate-test-usersig.min.js'></script>
<script src=' js/libs/generateTestUserSig.js'></script>
<script src=' js/tooltip.js'></script>
<script src=' js/common.js'></script>
<script src=' js/client.js'></script>
<script src=' js/shareClient.js'></script>
<script src=' js\index.js'></script>
</body>

</html>
